<template>
  <div class="form">
    <div v-for="(item, key) in list" :key="key" class="form-item">
      <!-- input -->
      <my-input
        v-if="item.type == 'input'"
        :value.sync="item.value"
        :label="item.label"
        :placeholder="item.placeholder"
      ></my-input>
      <!-- select -->
      <div v-if="item.type == 'select'" class="select-block">
        <div class="label">{{ item.label }}：</div>
        <el-select
          :value="item.value"
          :placeholder="item.placeholder"
          @change="onSelect($event, key)"
        >
          <el-option
            v-for="op in item.list"
            :key="op.value"
            :label="op.label"
            :value="op.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- button -->
      <my-button
        v-if="item.type == 'button'"
        :bgc="item.bgc"
        :fontColor="item.fontColor"
        @click="handleClickBtn(key)"
        >{{ item.btnText }}</my-button
      >
    </div>
  </div>
</template>

<script>
import myInput from "@/components/myInput.vue";
import myButton from "@/components/myButton.vue";
export default {
  components: {
    myInput,
    myButton,
  },
  props: {
    list: {},
  },
  data() {
    return {};
  },
  methods: {
    onSelect(val, key) {
      this.$emit("changeFormData", {
        val,
        key,
      });
    },
    handleClickBtn(key) {
      this.$emit("handleClickBtn", key);
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  .form-item {
    .label {
      margin-left: 40px;
      text-align: right;
    }
  }
}
/deep/ .myInput {
  .label {
    margin-left: 40px;
  }
}
.select-block {
  display: flex;
  align-items: center;
  height: 30px;

  /deep/ .el-select {
    width: 184px;
    height: 30px;
    .el-input {
      height: 100%;
      .el-input__inner {
        height: 100%;
        border: 1px solid #e7e7e7;
      }
      .el-input__icon {
        line-height: normal;
      }
    }
  }
}
.button {
  margin-left: 15px;
}
.label {
  color: #333;
  font-size: 14px;
}
// 需要把下拉框选中文字的颜色换成红色
// .el-scrollbar /deep/ .el-select-dropdown__item.selected {
//   color: #ed565b !important;
// }
</style>